<template>
  <div class="add_Assigne">
    <el-dialog v-if="isAssigne===2" title="分配员工角色" :visible="isShowDialog" @close="btnCanCel">
      <el-checkbox-group v-model="employeeIds">
        <el-checkbox v-for="(item) in getRoleList" :key="item.id" :label="item.id">{{ item.title }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="btnCanCel">取 消</el-button>
        <el-button size="small" type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog v-if="isAssigne===1" :title="employeeForm.id?'编辑员工':'添加员工'" :visible="isShowDialog" @close="btnCanCel">
      <el-form ref="employeeForm" :rules="rules" :model="employeeForm">
        <el-form-item prop="username" label="用户名" label-width="70px">
          <el-input v-model="employeeForm.username" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="email" label="邮箱" label-width="70px">
          <el-input v-model="employeeForm.email" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="password" label="密码" label-width="70px">
          <el-input v-model="employeeForm.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="头像" label-width="70px">
          <imageUpload ref="staffPhoto" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="btnCanCel">取 消</el-button>
        <el-button size="small" type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { editEmployee, getEmployee } from '@/api/employee'
import { registered } from '@/api/user'
import { getRoleList } from '@/api/role'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      employeeForm: {
        id: '',
        username: '',
        email: '',
        password: '',
        image: ''
      },
      rules: {
        username: [// 用户名
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        email: [ // 邮箱
          { required: true, message: '电子邮箱不能为空', trigger: 'blur' }
        ],
        password: [ // 密码
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 12, message: '密码在6到12位之间', trigger: 'blur' }
        ]
      },
      isAssigne: 1,
      employeeIds: [],
      getRoleList: []
    }
  },
  async created() {
    this.getRoleList = await getRoleList({ _limit: 999, _start: 0 })
  },
  methods: {
    async editEmployee(assigne, id) {
      this.isAssigne = assigne
      this.employeeData = await getEmployee(id)
      if (assigne === 1) {
        this.$refs.staffPhoto.fileList = [{ url: this.employeeData.image }]
      }
      this.employeeIds = this.employeeData.roles.map(item => item.id)
      this.employeeForm = {
        id,
        username: this.employeeData.username,
        email: this.employeeData.email,
        password: '******'
      }
    },
    async btnOk() {
      if (this.isAssigne !== 2) {
        if (this.$refs.staffPhoto.fileList[0].status !== 'success') {
          this.$message.warning({
            message: '请等待图片上传完成',
            center: true
          })
          return
        }
        this.employeeForm.image = this.$refs.staffPhoto.fileList[0].url
        if (this.employeeForm.id) {
        // 编辑
          await editEmployee(this.employeeForm)
          await this.$store.dispatch('user/getUserInfo')
          this.$message.success({
            message: '编辑员工成功',
            center: true
          })
        } else {
        // 新增
          await registered(this.employeeForm)
          this.$message.success({
            message: '新增员工成功',
            center: true
          })
        }
      } else {
        // 分配权限
        const arr = this.getRoleList.filter(item => {
          return this.employeeIds.includes(item.id)
        })
        await editEmployee({ ...this.employeeData, roles: arr })
        this.$message.success({
          message: '分配角色成功',
          center: true
        })
      }
      this.$emit('getEmployeeList')
      this.$emit('update:isShowDialog', false)
    },
    btnCanCel() {
      if (this.isAssigne !== 2) {
        this.$refs.staffPhoto.fileList = []
        this.$refs.employeeForm.resetFields()
      } else {
        this.employeeIds = []
      }

      this.employeeForm = {
        id: '',
        username: '',
        email: '',
        password: '',
        image: ''
      }
      this.$emit('update:isShowDialog', false)
    }
  }

}
</script>

<style>

</style>
